<template>
  <view class="login-container">
    <!-- 顶部Logo区域 -->
	<view class="container-view">
    <view class="logo-section">
<!--      <image class="pool-table-logo" src="/static/logo.png"></image> -->
      <text class="shop-name">重置密码</text>
    </view>
    <!-- 登录表单区域 -->
    <view class="form-card">
      <view class="form-container">
      <!-- 用户名输入 -->
      <!-- 密码输入 -->
      <view class="input-group">
        <text class="input-label">新密码</text>
        <view class="password-input-wrapper">
          <input 
            class="input-field password-input"
            :type="showPassword ? 'text' : 'password'" 
            placeholder="请输入新密码" 
            v-model="password"
            @input="validateForm"
          />
          <view class="password-toggle" @click="togglePasswordVisibility">
            <image 
              class="eye-icon" 
              src="/static/login/yanjing_1@3x.png"
            ></image>
          </view>
        </view>
      </view>

      <!-- 密码输入 -->
      <view class="input-group">
        <text class="input-label">确认新密码</text>
        <view class="password-input-wrapper">
          <input 
            class="input-field password-input"
            :type="showPassword ? 'text' : 'password'" 
            placeholder="请再次输入密码" 
            v-model="password"
            @input="validateForm"
          />
          <view class="password-toggle" @click="togglePasswordVisibility">
            <image 
              class="eye-icon" 
              src="/static/login/yanjing_1@3x.png"
            ></image>
          </view>
        </view>
      </view>

      <!-- 记住密码和忘记密码 -->
      <view class="password-options">
        <view class="remember-password" @click="toggleRememberPassword">
          <view class="checkbox" :class="{ 'checked': rememberPassword }">
            <text v-if="rememberPassword" class="check-icon">✓</text>
          </view>
          <text class="remember-text">记住密码</text>
        </view>
        <text class="forgot-password" @click="handleForgotPassword">忘记密码？</text>
      </view>

      <!-- 登录按钮 -->
      <button 
        class="login-button" 
        :disabled="!isFormValid"
        @click="handleLogin"
      >
        登录
      </button>
      </view>
    </view>
</view>
    <!-- 错误提示 -->
    <view v-if="errorMessage" class="error-message">
      {{ errorMessage }}
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        username: '',
        password: '',
        showPassword: false,
        rememberPassword: true,
        errorMessage: '',
        isFormValid: false
      }
    },
    onLoad() {
      // 检查是否有保存的登录信息
      this.checkSavedCredentials();
    },
    methods: {
      // 表单校验
      validateForm() {
        this.isFormValid = this.username.trim() !== '' && this.password.trim() !== '';
        // 清除错误信息
        if (this.errorMessage) {
          this.errorMessage = '';
        }
      },

      // 切换密码显示/隐藏
      togglePasswordVisibility() {
        this.showPassword = !this.showPassword;
      },

      // 切换记住密码状态
      toggleRememberPassword() {
        this.rememberPassword = !this.rememberPassword;
      },

      // 处理登录
      handleLogin() {
        if (!this.isFormValid) {
          this.errorMessage = '请输入用户名和密码';
          return;
        }

        // 简单的登录逻辑，实际项目中应该调用API
        console.log('登录信息:', {
          username: this.username,
          password: this.password,
          rememberPassword: this.rememberPassword
        });

        // 如果选择记住密码，保存到本地存储
        if (this.rememberPassword) {
          try {
            uni.setStorageSync('username', this.username);
            // 注意：实际项目中密码不应该明文存储，这里只是示例
          } catch (e) {
            console.error('保存登录信息失败:', e);
          }
        } else {
          // 清除保存的登录信息
          try {
            uni.removeStorageSync('username');
          } catch (e) {
            console.error('清除登录信息失败:', e);
          }
        }

        // 登录成功后跳转到首页
        uni.switchTab({
          url: '/pages/index/index'
        });
      },

      // 处理忘记密码
      handleForgotPassword() {
        console.log('忘记密码');
        // 实际项目中应该跳转到找回密码页面
        uni.showToast({
          title: '找回密码功能待实现',
          icon: 'none'
        });
      },

      // 检查是否有保存的登录信息
      checkSavedCredentials() {
        try {
          const savedUsername = uni.getStorageSync('username');
          if (savedUsername) {
            this.username = savedUsername;
            this.validateForm();
          }
        } catch (e) {
          console.error('读取登录信息失败:', e);
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 388rpx 28rpx 0 28rpx;
    background-color: #fff;
    min-height: 100vh;
    box-sizing: border-box;

	background-image: url('/static/login/Group_3@3x.png');
 background-size: contain; /* 完整显示图片，可能有空白 */
	// background-position: center;
	background-repeat: no-repeat;
  }
  .container-view{
	  box-sizing: border-box;
	  width: 694rpx;
	  height: 862rpx;
	  box-sizing: border-box;
	  	background-image: url('/static/login/Group_4@2x.png');
	  background-size: contain; /* 完整显示图片，可能有空白 */
	  	// background-position: center;
	  	background-repeat: no-repeat;
  }
  /* 表单卡片 */
  .form-card {
    width: 100%;
    padding:0 20rpx;
	box-sizing: border-box;
    // background-color: #FFFFFF;
    // border-radius: 20rpx;
    // margin-bottom: 40rpx;

  }

  /* Logo区域 */
  .logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 694rpx;
    height: 238rpx;
	line-height: 238rpx;
  }
  .pool-table-logo {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 20rpx;
  }
  .shop-name {
    font-size: 48rpx;
    color: #333333;
    font-weight: bold;
  }

  /* 表单容器 */
  .form-container {
    width: 100%;
    padding: 40rpx;
    box-sizing: border-box;
  }

  /* 输入组 */
  .input-group {
    margin-bottom: 40rpx;
  }
  .input-label {
    display: block;
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 12rpx;
  }
  .input-field {
    width: 100%;
    height: 88rpx;
    padding: 0 30rpx;
    background-color: #FFFFFF;
    border: 1rpx solid #EEEEEE;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333333;
    box-sizing: border-box;
  }
  .input-field::placeholder {
    color: #999999;
  }

  /* 密码输入 */
  .password-input-wrapper {
    position: relative;
  }
  .password-input {
    padding-right: 90rpx;
  }
  .password-toggle {
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 40rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .eye-icon {
    width: 36rpx;
    height: 36rpx;
  }

  /* 密码选项 */
  .password-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;
  }
  .remember-password {
    display: flex;
    align-items: center;
  }
  .checkbox {
    width: 32rpx;
    height: 32rpx;
    border: 2rpx solid #CCCCCC;
    border-radius: 8rpx;
    margin-right: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .checkbox.checked {
    background-color: #1EBE76;
    border-color: #1EBE76;
  }
  .check-icon {
    width: 20rpx;
    height: 16rpx;
  }
  .remember-text {
    font-size: 26rpx;
    color: #666666;
  }
  .forgot-password {
    font-size: 26rpx;
    color: #1EBE76;
  }

  /* 登录按钮 */
  .login-button {
    width: 100%;
    height: 96rpx;
	line-height: 96rpx;
    background-color: #1EBE76;
    color: #FFFFFF;
    font-size: 32rpx;
    font-weight: bold;
    border: none;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
  }
  .login-button:disabled {
    background-color: #CCCCCC;
    color: #FFFFFF;
  }

  /* 错误提示 */
  .error-message {
    width: 100%;
    padding: 20rpx;
    background-color: #FFF2F0;
    color: #F5222D;
    font-size: 26rpx;
    text-align: center;
    border-radius: 12rpx;
    box-sizing: border-box;
  }

  /* 复选框样式优化 */
  .check-icon {
    color: #FFFFFF;
    font-size: 20rpx;
    font-weight: bold;
  }
</style>